<template>
  <div class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
    <div class="panel animated" :class="open? 'zoomIn':''">
      <div class="title">
        <div class="close" @click="cancel()"></div>
      </div>
      <div class="success-tips-icon"></div>
      <div class="success-tips-top-title">下载成功</div>
      <div class="success-tips-top-content">{{fileName}}</div>
      <div class="success-tips-desc">{{leftTimer}}秒后自动关闭</div>
    </div>
  </div>
</template>
<script>
var vm, $fileInput;
export default {
  data: function() {
    return {
      show: false,
      open: false,
      fileName: "",
      timer: null,
      leftTimer: 3,
    }
  },
  methods: {
    init: function(file) {
      vm.show = true;
      vm.open = true;
      vm.fileName = file;

      if (vm.timer != null) {
        // clearTimeout(vm.timer);
        clearInterval(vm.timer);
        vm.timer = null;
      }
      vm.leftTimer = 3;
      vm.timer = setInterval(() => {
        vm.leftTimer--;
        if (vm.leftTimer == 0) {
          vm.cancel();
        }
        console.log("###");
      }, 1000);
    },

    cancel: function() {
      clearInterval(vm.timer);
      vm.timer = null;
      vm.leftTimer = 0;
      //隐藏弹窗
      vm.open = false;
      setTimeout(function() {
        vm.show = false;
      }, 500);

    },
    sure: function() {
      vm.$emit('callback');
      vm.show = false;
    },


  },
  created: function() {
    vm = this;
  },
  mounted: function() {},
  destroy: function() {
    // clearTimeout(vm.timer);
    clearInterval(vm.timer);
    vm.timer = null;
    vm.leftTimer = 0;
  }
}

</script>
<style scoped src="../../../style/module/dialog.css"></style>
<style scoped>
.panel {
  width: 4.96rem;
  height: 4.23rem;
  padding-bottom: 0.1rem;
}

.success-tips-icon {
  position: relative;
  width: 0.66rem;
  height: 0.67rem;
  background-image: url(../../../assets/img/answer_system/right.png);
  background-size: 100% 100%;
  margin: 0 auto;
  top: 0.1rem;
}
.success-tips-top-title{
  position: relative;
  width: 100%;
  /*height: 2.3rem;*/
  margin: 0 auto;
  top: 0.2rem;
  font-size: 0.22rem;
  text-align: center;
  color: #333333;
  letter-spacing: 0.05rem;
  overflow: hidden;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}
.success-tips-top-content {
  position: relative;
  width: 100%;
  height: 2.2rem;
  margin: 0 auto;
  top: 0.3rem;
  font-size: 0.16rem;
  text-align: center;
  color: #333333;
  letter-spacing: 0.05rem;
  overflow: hidden;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

.success-tips-desc {
  position: relative;
  font-size: 0.16rem;
  margin: auto 0;
  text-align: center;
  top: 0.3rem;
  color: #666666;
  letter-spacing: 0.01rem;
  /*margin-bottom: 0.03rem;*/
  /*bottom: 0.01rem;*/
}

</style>
